<template>
  <div class="OralReport_bg">
    <div class="OralReport">
      <div class="OralReport_content">
        <!-- 标题部分 -->
        <div class="OralReport_title">
          <span>{{ $t('oralReport.oralReport_title') }}</span>
        </div>
        <!-- 信息盒子部分 -->
        <div class="OralReport_info bd">
          <el-row>
            <el-col :offset="1" :span="7">
              <span class="title_text">{{ $t('oralReport.oralReport_name') }}:</span>
              <span>{{ infoData.name }}</span>
            </el-col>
            <el-col :span="8">
              <span class="title_text">{{ $t('oralReport.oralReport_sex') }}:</span>
              <span>{{
                infoData.sex === '0' ? $t('oralReport.sex1') : $t('oralReport.sex2')
              }}</span>
            </el-col>
            <el-col :span="8">
              <span class="title_text">{{ $t('oralReport.oralReport_clinic') }}:</span>
              <span>{{ infoData.clinic }}</span>
            </el-col>
            <el-col :offset="1" :span="7">
              <span class="title_text">{{ $t('oralReport.oralReport_date') }}:</span>
              <span>{{ infoData.date }}</span>
            </el-col>
          </el-row>
        </div>

        <!-- 三维模型部分 -->
        <div class="OralReport_model">
          <el-card class="OralReport_subtitle">
            {{ $t('oralReport.oralReport_model') }}
          </el-card>

          <div class="OralReport_model_box bd">
            <div class="btn_box">
              <el-tooltip class="item" effect="dark" :content="$t('oralReport.view_angle_1')" placement="right">
                <img @click="switchView('1')" :class="{ themeBg: viewType === '1' }" src="@/assets/img/icon/occlu.png"
                  alt="" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('oralReport.view_angle_2')" placement="right">
                <img @click="switchView('2')" :class="{ themeBg: viewType === '2' }"
                  src="@/assets/img/icon/back_view.png" alt="" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('oralReport.view_angle_3')" placement="right">
                <img @click="switchView('3')" :class="{ themeBg: viewType === '3' }"
                  src="@/assets/img/icon/occlu_fill.png" alt="" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('oralReport.view_angle_4')" placement="right">
                <img @click="switchView('4')" :class="{ themeBg: viewType === '4' }" src="@/assets/img/icon/left.png"
                  alt="" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('oralReport.view_angle_5')" placement="right">
                <img @click="switchView('5')" :class="{ themeBg: viewType === '5' }" src="@/assets/img/icon/right.png"
                  alt="" />
              </el-tooltip>
            </div>
            <div class="model_box">
              <threeLoad ref="threeLoad" v-if="threeFile.length > 0" :fileList="threeFile" />

              <span :class="['resetting_box', { resetting_box_pc: deviceType === 'pc' }]" @click="toResetting">
                <el-tooltip effect="dark" :content="$t('oralReport.resetText')">
                  <img src="./../../assets/img/icon/flush.png" alt="" />
                </el-tooltip>
              </span>


            </div>
          </div>
        </div>

        <!-- 模型截图部分 -->
        <div class="OralReport_screenshot">
          <el-card class="OralReport_subtitle">
            {{ $t('oralReport.oralReport_screenshot') }}
          </el-card>
          <div class="OralReport_screenshot_box bd">
            <div class="OralReport_screenshot_box_top" :style="[
              {
                'min-height': deviceType === 'pc' ? '600px' : '300px',
              },
            ]">
              <div class="screenshot_box">
                <img :src="toothPositionPic" alt="" />
              </div>
              <div class="carousel_box">
                <el-carousel trigger="click" arrow="always" :autoplay="false" :loop="false">
                  <el-carousel-item v-for="(item, index) in ModelScreenshot" :key="index">
                    <img :src="item.fileUrl" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <div class="OralReport_screenshot_box_bottom" v-if="problemList.length > 0">
              <div v-for="(item, index) in problemList" :key="index">
                <span :class="['round', `roundBg${item.value}`]"> </span>
                <span>
                  {{ $t(`oralReport.tooth_one_${item.value}`) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 问题详情部分 -->
        <div class="OralReport_problem">
          <el-card class="OralReport_subtitle">
            {{ $t('oralReport.problem_details') }}
          </el-card>

          <div class="OralReport_problem_box">
            <el-collapse v-for="(item, index) in problemList.filter((f) => f.value != -1)" :key="index"
              :class="`shallow${item.value}`" @change="problemChange(item.value)">
              <el-collapse-item>
                <template slot="title">
                  <div class="collapse_title">
                    <span :class="`roundBg${item.value}`">{{ index + 1 }}</span>
                    <span>{{ $t(`oralReport.tooth_one_${item.value}`) }}</span>
                  </div>
                </template>
                <div :class="['problem_item', { problem_item_pc: deviceType === 'pc' }]"
                  v-for="(item1, index1) in item.chidren" :key="index1">
                  <div class="row1">
                    <span class="numberBox">
                      <span :class="['line', `roundBg${item.value}`]"></span>
                      <span class="number">{{ index1 + 1 }}.</span>
                    </span>
                    <span class="problem_name">{{ $t('oralReport.problem_name') }}:</span>

                    <!-- 新数据 -->
                    <span v-show="item1.versionNumber">
                      <span v-show="Number(item1.secondaryType) === -1">{{
                        $t(`oralReport.tooth_one_${item.value}`)
                      }}</span>
                      <span v-show="Number(item1.secondaryType) !== -1 &&
                        item1.secondaryType !== '6' &&
                        item1.secondaryType !== '12' &&
                        item1.secondaryType !== '14' &&
                        item1.secondaryType !== '20' &&
                        item1.secondaryType !== '21' &&
                        item1.secondaryType !== '22' &&
                        item1.secondaryType !== '23' &&
                        item1.secondaryType !== '24'">
                        {{
                          item1.secondaryType
                            ? $t(`oralReport.tooth_two_${item1.secondaryType}`)
                            : $t(`oralReport.tooth_one_${item.value}`)
                        }}
                      </span>

                      <span v-show="Number(item1.secondaryType) !== -1 &&
                        item1.secondaryType === '6' ||
                        item1.secondaryType === '12' ||
                        item1.secondaryType === '14' ||
                        item1.secondaryType === '20' ||
                        item1.secondaryType === '21' ||
                        item1.secondaryType === '22' ||
                        item1.secondaryType === '23' ||
                        item1.secondaryType === '24'">
                        {{
                          item1.items[item1.currIndex].thirdType
                            ? $t(`oralReport.tooth_three_${item1.items[item1.currIndex].thirdType}`)
                            : $t(`oralReport.tooth_two_${item1.secondaryType}`)
                        }}
                        
                      </span>



                    </span>
                    <!-- 旧数据 -->
                    <span v-show="!item1.versionNumber">
                      <!-- 大于19是一级标题 -->
                      <span v-show="Number(item1.secondaryType) > 19">{{
                        $t(`oralReport.tooth_one_${item.value}`)
                      }}</span>

                      <!-- 小于19就是没有二级,就显示二级类目 -->
                      <span v-show="Number(item1.secondaryType) <= 19 &&
                        item1.secondaryType !== '6' &&
                        item1.secondaryType !== '12' &&
                        item1.secondaryType !== '14'
                        ">{{
                          item1.secondaryType
                            ? $t(`oralReport.tooth_two_${item1.secondaryType}`)
                            : $t(`oralReport.tooth_one_${item.value}`)
                        }}</span>

                      <!-- 是三级类目 -->
                      <span v-show="Number(item1.secondaryType) <= 19 &&
                        item1.secondaryType === '6' ||
                        item1.secondaryType === '12' ||
                        item1.secondaryType === '14'
                        ">{{
                          item1.items[item1.currIndex].thirdType
                            ? $t(`oralReport.tooth_three_${item1.items[item1.currIndex].thirdType}`)
                            : $t(`oralReport.tooth_two_${item1.secondaryType}`)
                        }}</span>


                    </span>
                  </div>
                  <div class="row2">
                    <span>{{ $t('oralReport.problem_description') }}:</span>
                    <span style="display: inline">{{ item1.items[item1.currIndex].describ }}</span>
                  </div>
                  <div class="row3">
                    <span>{{ $t('oralReport.problem_solution') }}:</span>
                    <span style="display: inline">{{ item1.items[item1.currIndex].solution }}</span>
                  </div>
                  <!-- v-show="item3.toothList" -->

                  <el-carousel trigger="click" :autoplay="false" arrow="always" :loop="false"
                    @change="(carouselIndex) => problemCarouselChange(carouselIndex, item1)">
                    <div class="toothBox" v-show="item1.items[item1.currIndex].toothList">
                      <!-- item3.toothList -->
                      <span :class="['toothItem', `roundBg${item.value}`]" v-for="(toothItem, toothIndex) in item1.items[
                        item1.currIndex
                      ].toothList.split(',')" :key="toothIndex">
                        {{ toothItem }}
                      </span>
                    </div>
                    <el-carousel-item v-for="(item3, index3) in item1.items" :key="index3">
                      <img :src="item3.fileUrl" alt="" />
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </el-collapse-item>
            </el-collapse>

            <p>
              {{ $t('oralReport.prompt') }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :title="$t('oralReport.oralReport_1')" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%">
      <div v-loading="downloadLoading" :element-loading-text="$t('oralReport.oralReport_3')">
        <p style="text-align: center">{{ $t('oralReport.oralReport_4') }}</p>
      </div>
      <span v-show="!downloadLoading" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ $t('oralReport.oralReport_5') }}
        </el-button>
        <el-button type="primary" @click="regenerateFile()">
          {{ $t('oralReport.oralReport_6') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as THREE from 'three';
import threeLoad from '@/components/three/index';
export default {
  name: 'OralReport',

  data() {
    return {
      reportId: this.$route.query.oralReportId,
      lang: this.$route.query.lang ? this.$route.query.lang : 'cn',
      /***
       * 3d文件部分
       */
      // 3d文件
      threeFile: {},
      // 存储上一次点击的viewType

      viewType: '1',

      // 概述信息
      infoData: {},
      // 牙位图信息
      toothPositionPic: '',
      // 截图数据
      ModelScreenshot: [],
      // 问题详情数据(一级)

      problemList: [],

      // 确定是移动端还是pc端
      deviceType: 'pc',

      dialogVisible: false,
      downloadLoading: false,
    };
  },
  components: {
    threeLoad,
  },

  created() {
    this.setLangue();
    // 请求页面数据
    this.getData();
    
  },
  mounted() {
    let flag = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
    );
    if (flag) {
      // 移动端

      this.deviceType = 'phone';
    } else {
      // pc端
      this.deviceType = 'pc';
    }
  },
  methods: {
    setLangue() {
      localStorage.setItem('lang', this.lang);
      this.$i18n.locale = this.lang;
    },
    splitLastDot(str) {
      var lastDotIndex = str.lastIndexOf('.');
      if (lastDotIndex === -1) return [str, ''];

      return str.slice(lastDotIndex + 1);
    },
    groupingMtlData(data) {
      let fileListArr = [
        // 上颌
        {
          url: '',
          typeName: '',
          mtlUrl: '',
          picUrl: '',
          show: true,
        },
        // 下颌
        {
          url: '',
          typeName: '',
          mtlUrl: '',
          picUrl: '',
          show: true,
        },
      ];
      if (data && data.length > 0) {
        data.forEach((item) => {
          let suffix = this.splitLastDot(item.fileName);

          // obj
          if (suffix === 'obj' || suffix === 'ply' || suffix === 'stl') {
            // 上颌
            if (item.fileName.indexOf(`upper.${suffix}`) !== -1) {
              fileListArr[0].url = item.fileUrl;
              fileListArr[0].typeName = item.fileName;
            }
            // 下颌
            if (item.fileName.indexOf(`lower.${suffix}`) !== -1) {
              fileListArr[1].url = item.fileUrl;
              fileListArr[1].typeName = item.fileName;
            }
          } else if (suffix === 'mtl') {
            // 上颌
            if (item.fileName.indexOf('upper.obj.mtl') !== -1) {
              fileListArr[0].mtlUrl = item.fileUrl;
            }
            // 下颌
            if (item.fileName.indexOf('lower.obj.mtl') !== -1) {
              fileListArr[1].mtlUrl = item.fileUrl;
            }
          } else if (suffix === 'png') {
            // 上颌
            if (item.fileName.indexOf('upper.png') !== -1) {
              fileListArr[0].picUrl = item.fileUrl;
            }
            // 下颌
            if (item.fileName.indexOf('lower.png') !== -1) {
              fileListArr[1].picUrl = item.fileUrl;
            }
          }
        });
      }

      this.threeFile = fileListArr.filter((f) => f.url);
    },
    getData() {
      this.$http
        .get(`/clientOralExaminationReport/showOralExaminationReport?reportId=${this.reportId}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.infoData = res.data.Info[0];
            if (this.infoData.markStatus === -1) {
              this.dialogVisible = true;
              return false;
            }

            this.groupingMtlData(res.data['3DFile']);

            this.ModelScreenshot = res.data.ModelScreenshot.filter(
              (f) => f['fileName'] !== 'ToothInfo.png',
            );
            this.toothPositionPic = res.data.ModelScreenshot.filter(
              (f) => f['fileName'] === 'ToothInfo.png',
            )[0].fileUrl;
            // 处理3d文件
            res.data.ProblemDetails.forEach((item) => {
              this.problemList.push({
                value: item,
                chidren: [],
              });
            });
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    /**
     * 切换相机视角
     *
     */
    switchView(type) {
      if (this.viewType === '3' && type === '3') {
        return false;
      }
      let threeLoadRef = this.$refs.threeLoad;
      let boundingBox = new THREE.Box3().setFromObject(threeLoadRef.group);
      let center = new THREE.Vector3();
      boundingBox.getCenter(center);
      // 将组居中
      threeLoadRef.group.position.sub(center);
      threeLoadRef.resetControls();
      if (this.viewType === '3') {
        console.log('threeLoadRef.group1---',threeLoadRef.group1);
        threeLoadRef.group1.children.forEach((item) => {
          if (item.typeName.indexOf('upper') !== -1) {
            // 上颚
            item.rotateY(-23.5);
            item.position.set(item.position.x + 40, item.position.y, item.position.z - 34);
          } else {
            // 下颚
            item.rotateY(23.5);
            item.position.set(item.position.x + 20, item.position.y, item.position.z + 30);
          }
        });
      } else {
      }
      this.viewType = type;
      if (threeLoadRef) {
        if (type === '1') {
          threeLoadRef.group.visible = true;
          threeLoadRef.group1.visible = false;

          threeLoadRef.camera.position.set(0, 0, 200);
        } else if (type === '2') {
          threeLoadRef.group.visible = true;
          threeLoadRef.group1.visible = false;

          // let boundingBox = new THREE.Box3().setFromObject(threeLoadRef.group);
          // let center = new THREE.Vector3();
          // boundingBox.getCenter(center);
          // // 将组居中
          // threeLoadRef.group.position.sub(center);
          threeLoadRef.camera.position.set(0, 0, -200);
        } else if (type === '3') {
          threeLoadRef.group.visible = false;
          threeLoadRef.group1.visible = true;

          // 新加的
          // let boundingBox = new THREE.Box3().setFromObject(threeLoadRef.group);
          // let center = new THREE.Vector3();
          // boundingBox.getCenter(center);

          threeLoadRef.modelTiling();
        } else if (type === '4') {
          threeLoadRef.group.visible = true;
          threeLoadRef.group1.visible = false;

          // let boundingBox = new THREE.Box3().setFromObject(threeLoadRef.group);
          // let center = new THREE.Vector3();
          // boundingBox.getCenter(center);
          // // 将组居中
          // threeLoadRef.group.position.sub(center);
          threeLoadRef.camera.position.set(-200, 0, 0);
        } else if (type === '5') {
          threeLoadRef.group.visible = true;
          threeLoadRef.group1.visible = false;

          // let boundingBox = new THREE.Box3().setFromObject(threeLoadRef.group);
          // let center = new THREE.Vector3();
          // boundingBox.getCenter(center);
          // // 将组居中
          // threeLoadRef.group.position.sub(center);
          threeLoadRef.camera.position.set(200, 0, 0);
        }
      }
    },
    toResetting() {

      let threeLoadRef = this.$refs.threeLoad;

      threeLoadRef.group.children[0].updateMatrix();

      threeLoadRef.resetControls();
      this.switchView(this.viewType);
    },

    problemChange(val) {
      let isAjax = false;
      this.problemList.forEach((item) => {
        if (item.value === val && item.chidren.length <= 0) {
          isAjax = true;
        }
      });
      if (!isAjax) {
        return false;
      }
      this.$http
        .get(
          `/clientOralExaminationReport/showSecondaryType?mainType=${val}&reportId=${this.reportId}`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            res.data.forEach((item) => {
              item['currIndex'] = 0;
            });
            this.problemList.forEach((item) => {
              if (item.value === val) {
                item.chidren = res.data;
              }
            });
            console.log('this.problemList--', this.problemList);
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    problemCarouselChange(carouselIndex, currObj) {
   
      currObj['currIndex'] = carouselIndex;
    },
    regenerateFile() {
      this.downloadLoading = true;
      this.$http({
        method: 'post',
        url: `dataConversion/coldDataToHotDataOralReport2Cloud?primaryId=${this.infoData.primaryId}`, //后端接口
      }).then(({ data: res }) => {
        this.dialogVisible = false;
        this.downloadLoading = false;
        if (res.code !== 0) {
          this.$message({
            message: this.$t('add.add071'),
            type: 'success',
          });
        } else {
        }
        this.getData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.OralReport_bg {
  background: #d7e1fe66;
  height: 100%;

  .OralReport {
    font-size: 15px;
    width: 100%;
    height: 100%;

    padding: 10px;
    overflow: auto;
    background: url('./../../assets/img/report_background.png') no-repeat;
    background-size: cover;

    ::v-deep .el-carousel__arrow {
      z-index: 999999 !important;
    }

    ::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
      width: 7px;
      height: 7px;
      background: #003e67;
      border: 1px solid #003e67;
      border-radius: 50%;
      opacity: 0.3;
    }

    ::v-deep .el-carousel__arrow {
      width: 45px;
      height: 45px;

      i {
        font-size: 18px;
      }
    }

    .themeBg {
      background: rgb(60 97 195 / 50%) !important;
    }

    ::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button {
      width: 7px;
      height: 7px;
      background: #003e67;
      border-radius: 50%;
      opacity: 1;
    }

    //   统一的圆圈样式
    .round {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;

      margin-right: 5px;
    }

    .roundBg-1 {
      background: rgb(166, 166, 166);
    }

    .roundBg0 {
      background: rgb(232, 128, 204);
    }

    .roundBg1 {
      background: rgb(255, 168, 109);
    }

    .roundBg2 {
      background: rgb(159, 148, 243);
    }

    .roundBg3 {
      background: rgb(240, 111, 111);
    }

    .roundBg4 {
      background: rgb(98, 136, 253);
    }

    .roundBg5 {
      background: rgb(136, 213, 124);
    }

    .roundBg6 {
      background: rgb(242, 197, 124);
    }

    .roundBg7 {
      background: rgb(242, 197, 124);
    }

    .roundBg8 {
      background: rgb(83, 220, 168);
    }

    .roundBg9 {
      background: rgb(140, 208, 223);
    }

    .roundBg10 {
      background: rgb(242, 205, 61);
    }

    .roundBg11 {
      background: rgb(136, 187, 238);
    }


    .shallow0 {
      background: rgba(232, 128, 204, 0.2);
    }

    .shallow1 {
      background: rgba(255, 168, 109, 0.2);
    }

    .shallow2 {
      background: rgba(159, 148, 243, 0.2);
    }

    .shallow3 {
      background: rgba(240, 111, 111, 0.2);
    }

    .shallow4 {
      background: rgba(98, 136, 253, 0.2);
    }

    .shallow5 {
      background: rgba(136, 213, 124, 0.2);
    }

    .shallow6 {
      background: rgba(242, 197, 124, 0.2);
    }

    .shallow7 {
      background: rgba(242, 197, 124, 0.2);
    }

    .shallow8 {
      background: rgba(83, 220, 168, 0.2);
    }

    .shallow9 {
      background: rgba(140, 208, 223, 0.2);
    }

    .shallow10 {
      background: rgb(242, 205, 61, 0.2);
    }

    .shallow11 {
      background: rgb(136, 187, 238, 0.2);
    }

    // 统一的折叠样式
    .el-collapse {
      margin-top: 10px;
      border-radius: 10px;

      .collapse_title {
        span {
          display: inline-block;
        }

        >span:nth-child(1) {
          width: 35px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          color: #ffffff;
          margin-left: 10px;
          border-radius: 8px;
          margin-right: 10px;
        }

        >span:nth-child(2) {
          font-size: 16px;
          font-weight: bold;
        }
      }

      .problem_item {
        padding-left: 10px;

        span {
          display: inline-block;
          font-size: 15px;
        }

        .row2,
        .row3 {
          padding-left: 35px;

          >span:nth-child(1) {
            margin-right: 15px;
          }
        }

        .row1 {
          display: flex;
          align-items: center;
          height: 40px;
          margin-top: 10px;

          .numberBox {
            width: 35px;
            display: flex;

            .line {
              width: 3px;
              height: 25px;
              margin-right: 10px;
            }

            .number {
              margin-right: 10px;
            }
          }

          .problem_name {
            margin-right: 15px;
          }
        }

        .row3 {
          margin-bottom: 15px;
        }

        .toothBox {
          position: absolute;
          z-index: 999;
          width: 25%;

          .toothItem {
            display: inline-block;
            width: 40px;
            height: 40px;

            line-height: 40px;
            text-align: center;
            margin-left: 15px;
            margin-top: 15px;
            border-radius: 10px;
            color: #ffffff;
            cursor: pointer;
          }
        }

        .el-carousel {
          .el-carousel__item {
            // min-width: 1000px;
            // min-height: 600px;
          }

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .problem_item_pc {
        ::v-deep .el-carousel__container {
          min-width: 1000px;
          min-height: 600px;
        }
      }
    }

    ::v-deep .el-collapse-item__header {
      background: transparent;
    }

    // 统一的边框样式
    .bd {
      border: 1px solid #3c61c3;
      border-radius: 10px;
    }

    .OralReport_content {
      padding: 10px;
      width: 85%;
      margin: 0 auto;

      border-radius: 10px;
      background: rgb(255 255 255 / 30%);

      .OralReport_title {
        color: #3c61c3;
        font-size: 40px;

        text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
        padding-top: 10px;
      }

      .OralReport_info,
      .OralReport_model,
      .OralReport_model_box,
      .OralReport_screenshot,
      .OralReport_problem,
      .OralReport_screenshot_box,
      .OralReport_problem_box {
        margin-top: 15px;
      }

      .OralReport_info {
        padding: 10px;

        .el-col {
          padding: 7px;
        }

        .title_text {
          display: inline-block;
          margin-right: 20px;
        }
      }

      .OralReport_model {
        .OralReport_model_box {
          position: relative;
          height: 450px;
          border-radius: 10px;

          .btn_box {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translate(0, -50%);
            display: flex;
            flex-direction: column;
            z-index: 999;

            img {
              background: #ffffff;
              border-radius: 10px;
              display: inline-block;
              margin-bottom: 10px;
              cursor: pointer;
            }
          }

          .model_box {
            width: 100%;
            height: 100%;
            position: relative;
            // top: 0.11%;
            // left: 0.11%;
            border-radius: 10px;

            .resetting_box {
              display: inline-block;
              width: 40px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background: #ffffff;
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              position: absolute;
              bottom: 5%;
              left: 50%;
              transform: translate(-50%, 0);
              cursor: pointer;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .resetting_box_pc:hover {
              background: rgba(60, 97, 195, 0.5) !important;
            }
          }
        }
      }

      .OralReport_screenshot {
        .OralReport_screenshot_box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 15px;
          background: rgb(255 255 255 / 90%);

          .OralReport_screenshot_box_top {
            // min-height: 600px;

            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .screenshot_box {
              width: 25%;

              >img {
                width: 100%;
                height: 100%;
              }
            }

            .carousel_box {
              width: 73%;
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);

              .el-carousel,
              ::v-deep .el-carousel__container {
                height: 100%;

                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }

          .OralReport_screenshot_box_bottom {
            min-height: 50px;
            margin-top: 15px;
            // height: 15%;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            >div {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              cursor: pointer;
              margin-bottom: 10px;
            }
          }
        }
      }

      .OralReport_problem_box {
        padding: 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.9);

        >p {
          margin: 15px 0;
          color: rgb(157 155 155 / 62%);
        }

        .el-carousel {
          width: 99%;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          // min-width: 1000px;
          //   min-height: 600px;
        }

        ::v-deep .el-carousel__container {

          // min-height: 600px;
          .el-carousel__item {
            display: flex;
            align-items: center;

            img {
              width: 50%;
              height: 90%;
              margin-left: 50%;
              transform: translate(-50%, 0) !important;
              object-fit: contain;
            }

            //width: 50%;
            //margin-left: 50%;
            //transform: translate(-50%, 0) !important;
          }
        }
      }

      .OralReport_subtitle {
        font-size: 17px;
        font-weight: bolder;
      }
    }
  }
}
</style>
